<template>
  <div :class="`${xvueNameSpace}`">
    <div v-loading="isLoading" class="config-panel">
      <div class="container" :class="xvueTheme">
        <el-tabs v-model="activeName">
          <el-tab-pane :label="$demoi18n('panel.tab.baseInfo')" name="zero">
            <!-- xvue注册的组件 -->
            <xvp-base-info
              ref="xVueBaseInfo"
              class="haikan-video-unique"
              :isHideShareParameter="true"
              :widget-instance-id="widgetInstanceId"
              :isExistConfig="true"
              :isHideSaveButton="true"
            />
          </el-tab-pane>
          <el-tab-pane data-nameId="haikan-video-tab-pane" :label="propertyLabel" name="first">
            <panel-property ref="panel_property" :config="config" :widgetInstanceId="widgetInstanceId" :widget="widget" />
          </el-tab-pane>
          <el-tab-pane data-nameId="haikan-video-tab-pane" :label="$demoi18n('panel.tab.linkage')" name="third">
            <panel-linkage ref="panel_linkage" :config="config" :widget-instance-id="widgetInstanceId" />
          </el-tab-pane>
        </el-tabs>
        <div class="save_box">
          <el-button type="primary" class="saveBtn haikan-video-unique" @click.stop="saveAllData_()">{{
            $demoi18n('panel.button.apply')
          }}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { auroraDataSourceTypeOptions, dataSourceTypeOptions } from '@/common/panel_config';
import PanelLinkage from '@/components/panel-linkage-new/panel-linkage';
import haikanVideoConfigPanelBase from '@/mixin/config-panel-base.js';
import { mapMutations } from 'vuex';
import PanelProperty from './panel-property';

export default {
  name: 'PropertyPanelBunker',
  components: {
    PanelProperty,
    PanelLinkage,
  },
  mixins: [haikanVideoConfigPanelBase],
  props: ['config', 'orgConfig', 'widgetInstanceId', 'widget'],
  data() {
    return {
      isLoading: false,
      activeName: window.isLocalEnv ? 'first' : 'zero',
      dataSourceTypeOptions: dataSourceTypeOptions,
      auroraDataSourceTypeOptions,
      haikanVideoUnique: true,
      isAurora: this.$platformName === 'Aurora',
    };
  },
  methods: {
    ...mapMutations(['setCameraConfigs']),
    saveAllData_() {
      // 在vuex存储属性面板表单提交的cameraIndexCodes
      const config = this.collectCompConfig();

      // 历史组件海康组件data中数据校验会报错,但实际该组件不需要data数据.兼容历史组件
      config.config.data = {};
      const cameraIndexCodes = this.$refs.panel_property.getCameraIndexCodes();
      config.config.property.cameraIndexCodes = cameraIndexCodes;
      if (config.config.property.sourceId) {
        config.config.property.ip = '';
        config.config.property.appkey = '';
        config.config.property.secret = '';
      }
      this.saveAllData(config);

      const curCameraConfig = {
        widgetInstanceId: this.widgetInstanceId,
        cameraIndexCodes,
      };
      this.setCameraConfigs(curCameraConfig);
      return true;
    },
  },
};
</script>
<style lang="less" scoped>
// 配置面板通用样式，主要有明亮风格和蓝黑，样式名需一致
@import '../../common/less/config-panel.less';
</style>
